<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    [v-cloak] {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    {{name}}
    {{name}}
    {{name}}
  </div>
</body>

</html>
<script src="./vue_project/node_modules/vue/dist/vue.js"></script>
<script>
  new Vue({
    data() {
      return {
        name: "珠峰"
      }
    }
  }).$mount('#app')
</script>
<script>
  let obj = {
    q: 123,
    w: 234,
    e: {
      x: 234,
      y: 456
    }
  }

  function defineProperty(obj, k, value) {
    if (typeof value == 'object') {
      getProxy(value)
    }
    Object.defineProperty(obj, k, {
      get() {
        console.log(k, "被调用了")
        return value
      },
      set(val) {
        console.log(val)
        value = val
      }
    })
  }

  function getProxy(obj) {
    for (let k in obj) {
      defineProperty(obj, k, obj[k])
    }
  }
  getProxy(obj)

  //  vue3.0数据劫持的核心   Proxy
  let obj2 = {
    a: 123,
    b: 345
  }
  let proxyObj2 = new Proxy(obj2, {
    get(target, k) {
      console.log('get', arguments)
      return target[k]
    },
    set(target, k, val) {
      console.log('set', arguments)
      return target[k] = val
    }
  })
</script>